<template>
	<div class="mui-card">
		<ul class="mui-table-view">
			<li class="mui-table-view-cell mui-collapse">
				<a class="mui-navigate-right" href="#">vue</a>
				<div class="mui-collapse-content">
					<Cardlis></Cardlis>
					<Cardlis></Cardlis>
				</div>
			</li>
			<li class="mui-table-view-cell mui-collapse">
				<a class="mui-navigate-right" href="#">webapp</a>
				<div class="mui-collapse-content">
					<Cardlis></Cardlis>
          <Cardlis></Cardlis>
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
	import Cardlis from './cardlist.vue'
	export default {
		name: 'Cardlist',
		props: {
      food: {
        type: Object
      }
    },
    methods:{

    },
		// data() {
		// 	return {
		// 		//    msg: 'Welcome to Your Vue.js App'
		// 	}
		// },
		components: {
			Cardlis,
		},
	}
</script>

<style lang="scss" scoped>
.mui-table-view-cell.mui-active {
	background-color: #96D7F0;
}
.mui-active  .mui-navigate-right:after, .mui-push-left:after, .mui-push-right:after{
	color: #fff;
}
.mui-active  .mui-navigate-right{
	color:#fff;
}
</style>
